<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>iu</title>
		<style>
			body {
				margin: 0;
				background: #000;
			}

			#wrap {
				width: 300px;
				height: 400px;
				position: relative;
				margin: 300px auto;
				-webkit-perspective: 3000px;
				-moz-perspective: 3000px;
				-ms-transform: perspective(3000px);
				-ms-perspective: 3000px;
			}

			#head {
				width: 100%;
				height: 100%;
				position: absolute;
				-webkit-transform-style: preserve-3d;
				-webkit-animation: donghua 15s linear 0s infinite;
				-moz-transform-style: preserve-3d;
				-moz-animation: donghua 15s linear 0s infinite;
				-ms-transform-style: preserve-3d;
				-ms-animation: donghua 25s linear 0s infinite;
			}

			#head div {
				position: absolute;
				top: 0;
				left: 0;
				width: 300px;
				height: 400px;
				border: 1px solid #000 text-align: center;
				line-height: 100px;
			}

			#head div:nth-child(1) {
				-webkit-transform: rotateY(0deg) translateZ(400px);
				-moz-transform: rotateY(0deg) translateZ(400px);
				-ms-transform: rotateY(0deg) translateZ(400px);
				background: url(images/01.jpg);
				background-size: cover;
			}

			#head div:nth-child(2) {
				-webkit-transform: rotateY(36deg) translateZ(500px);
				-moz-transform: rotateY(36deg) translateZ(500px);
				-ms-transform: rotateY(36deg) translateZ(500px);
				background: url(images/02.jpg);
				background-size: cover;
			}

			#head div:nth-child(3) {
				-webkit-transform: rotateY(72deg) translateZ(400px);
				-moz-transform: rotateY(72deg) translateZ(400px);
				-ms-transform: rotateY(72deg) translateZ(400px);
				background: url(images/03.jpg);
				background-size: cover;
			}

			#head div:nth-child(4) {
				-webkit-transform: rotateY(108deg) translateZ(500px);
				-moz-transform: rotateY(108deg) translateZ(500px);
				-ms-transform: rotateY(108deg) translateZ(500px);
				background: url(images/04.jpg);
				background-size: cover;
			}

			#head div:nth-child(5) {
				-webkit-transform: rotateY(144deg) translateZ(400px);
				-moz-transform: rotateY(144deg) translateZ(400px);
				-ms-transform: rotateY(144deg) translateZ(400px);
				background: url(images/05.jpg);
				background-size: cover;
			}

			#head div:nth-child(6) {
				-webkit-transform: rotateY(180deg) translateZ(500px);
				-moz-transform: rotateY(180deg) translateZ(500px);
				-ms-transform: rotateY(180deg) translateZ(500px);
				background: url(images/06.jpg);
				background-size: cover;
			}

			#head div:nth-child(7) {
				-webkit-transform: rotateY(216deg) translateZ(400px);
				-moz-transform: rotateY(216deg) translateZ(400px);
				-ms-transform: rotateY(216deg) translateZ(400px);
				background: url(images/07.jpg);
				background-size: cover;
			}

			#head div:nth-child(8) {
				-webkit-transform: rotateY(252deg) translateZ(500px);
				-moz-transform: rotateY(252deg) translateZ(500px);
				-ms-transform: rotateY(252deg) translateZ(500px);
				background: url(images/08.jpg);
				background-size: cover;
			}

			#head div:nth-child(9) {
				-webkit-transform: rotateY(288deg) translateZ(400px);
				-moz-transform: rotateY(288deg) translateZ(400px);
				-ms-transform: rotateY(288deg) translateZ(400px);
				background: url(images/04.jpg);
				background-size: cover;
			}

			#head div:nth-child(10) {
				-webkit-transform: rotateY(324deg) translateZ(500px);
				-moz-transform: rotateY(324deg) translateZ(500px);
				-ms-transform: rotateY(324deg) translateZ(500px);
				background: url(images/07.jpg);
				background-size: cover;
			}

			@-webkit-keyframes donghua {
				0% {
					transform: rotateX(5deg) rotateY(360deg)
				}

				50% {
					transform: rotateX(-5deg) rotateY(180deg)
				}

				100% {
					transform: rotateX(5deg) rotateY(0deg)
				}
			}

			@-moz-keyframes donghua {
				0% {
					transform: rotateY(10deg) rotateY(0deg)
				}

				50% {
					transform: rotateY(-10deg) rotateY(180deg)
				}

				100% {
					transform: rotateY(10deg) rotateY(360deg)
				}
			}

			@-ms-keyframes donghua {
				0% {
					transform: rotateY(10deg) rotateY(0deg)
				}

				50% {
					transform: rotateY(-10deg) rotateY(180deg)
				}

				100% {
					transform: rotateY(10deg) rotateY(360deg)
				}
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="head">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
	</body>
</html>
